TableWorks is a WYSIWYG HTML editor specialized in the manipulation of tables. The HTML tag <TABLE> allows the creation of page structure that are otherwise impossible such as would be the insertion of a paragraph of text between two pictures and vice versa. It exploits this facility and is so designed that the user will not be forced to understand such terms as colspan and rowspan to use it.
What can you do with this software:
With TableWorks you can create standard web pages, create page format that appeared very difficult to realize (catalogs items, photos albums etc...) or simply pages that you often did using DTP software. It will enable you to create a complete web page or assist your favorite HTML editor in the creation of tables using its special feature that let you copy the HTML code produced by the software in the clipboard and then drop the same where you so desire.
About the manual:
The whole presumes that you are familar with the Macintosh interface and the use of a web browser.
Getting started:
Everything in TableWorks lives in tables, so you will start by creating one or more tables using the Add Table command in the Edit menu. Each new set of tables are placed one after the other. If you like you can insert a new table before existing ones using the Insert Table in the Edit menu, but you’ll have to learn how to select a table before doing that.
What is a table?. A table is like a small spreadsheet formed of a group of cells determined by the user upon creation of the table in answer to the request of the Add Table command. Columns and rows are not frozen in width or height, your creative need will be the master, notwithstanding such liberty a cell at your wish can span over many columns or rows, you’ll learn more about this ability in a moment . What can I do with tables?. Use them to hold text and/or graphic. Why using tables?. As there are no ways in HTML to specify that a block of text or a picture must appear at a specific location in the browser’s window, with tables you can work around that limitation. What do tables look like ? A table can be invisible, that’s the most commun use on the net, or have a border and be visible.
Suggestion to the user: Create a new table using the Add Table in the Edit menu. You will see a dialog asking you to set the number of columns and rows of the new table, accept the 3 by 3 suggestion. Then you will see a 9 cells table appears as selected.
How to select:
You can select tables or cells. Upon displacing the cursor over a cell it’s shape will change from the arrow to the plus sign, if you click then you’ll select that cell. If you move the cursor to the left or right side of a table then click, you will have selected the whole table. The selection of tables works like the finder you can shift click to select or deselect multiple tables. The selection of cells works like a spreadsheet, to select many cells click in a cell than while holding the mouse button drag to cover the cells you want to select. If you move the cursor between two cells either up or down you’ll see its shape changing to two small arrows, if you click there you can drag that line to resize a column or a row.
Suggestion to the user: Add another table to your page then practice the selection process before moving to the next section.
Choosing the cell type:
In HTML there are no such thing as a cell type, but TableWorks imposes upon you to select between two types of cells: Text Cell or Picture Cell, you change the cell type using Text Cell item or the Picture Cell item in the Table menu. A text cell must contain text only. Text may be aligned to either of the proposed choices found in the Align menu, each word individually formated to user’s choice using one of the formatted item in the Format menu. You can associate a link with your text. A picture cell must contain one picture without text. You can associate a link with a picture, for example: clicking on the picture could direct to another page or show a larger picture. There is another type of cell that you’ll create indirectly that can hold embedded tables (to wit: a table or tables within a cell).
Suggestion to the user: The default cell type is text, if you change the cell type to picture you’ll notice that a small icon appear in the middle of the cell, this indicate the nature of that cell.
Working with Text Cells:
Before entering text in a Text Cell you must first click in the middle of the cell so that the cursor shape change to an Ibeam, then in a standard way you can enter the text and apply formatting using the commands found in the Format menu. You can align the text horizontally and/or vertically using the commands found in the Align menu. You can perform the usual editing found in the Edit menu, cutting, copying, pasting and clearing.
Suggestion to the user: Click in the middle of a Text Cell then type something. Select a letter, a word, a phrase or the whole text then apply the formatting of your choice. If you change the text alignment of an empty cell you may have trouble getting the I beam cursor. The trick is you must click where you align, let’s say we align the text to the left and to the bottom, just click at the bottom left of the cell.
Working with Picture Cells:
To select a picture for a Picture Cell you will have to choose in the Table menu the Cell Infos item or double click on the cell.This brings out the Image Infos dialog. To select a picture click on the Select Image button and choose a GIF or JPEG file that you want to put in the cell. If you don’t have any such file you will need a software that can convert or create GIF and/or JPEG files. There are excellent sharewares that can do the job. The Link To field will be covered in the next section. The ALT string field let you type something that describes the image you have selected, this string is shown when for example there is not enough memory to view the image in the browser or in TableWorks. The next three fields let you change image attributes. The default values depend on the image you have selected. You can then change the image border,note: a border of 0 is invisible. The radio buttons let you align the picture inside the cell, to see something happen you will need a cell bigger than the picture. TableWorks always auto expand the size of a cell to fit the selected picture.
Suggestion to the user: You may wonder what kind of file is better GIF or JPEG. None is better, they serve different purposes. When you have photographic or photorealistic image use JPEG file format, for standard uniform graphics use GIF file format.
Suggestion to the user: It is not suggested to shrink an image by giving it a smaller width and/or height parameters, because you will then force the net user to wait in order to load a larger picture to eventually see a small one.
Creating links:
One of the most important feature of the Web is to let people click on a link and go somewhere else. TableWorks does not currently have a browsing feature, so you will need to go in your favorite browser to test your links. Now that the thruth is said, lets create links. You can create links for text cells and picture cells, in either case select a cell and choose the Cell Infos item in the Table menu. TableWorks distinguishes two types of links: local links (links that refer to a file in your own site) or external links (links that refer to something on the Internet, such as an example the Apple home page). For local links click on the Select Link button and choose a file on your hard disk, you will see the file name appear in the Link To field. For external links, just type what you need, for example to refer to Apple home page type: http://www.apple.com .To remove a link, select the text in the Link To field and clear it.
Giving your HTML document a title:
When you create a new document in TableWorks you see a field named Title at the top of the document window. Enter a descriptive title that is not very long. This title usually appears in the window title bar when seen in a browser.
Creating a complete page or site:
First of all you structure your site by creating a project folder within which you will save all your TableWorks files and pictures to be used. You can if you like create sub-folders in that project folder, for example: you can put all your pictures files in a sub-folder call projectimages. You must know that when you save a TableWorks document, a relative path is calculated and saved in the document, this mean that you cannot move say a picture file from one folder to another. If you do so you will have to inform TableWorks where is the picture file now. When a document is opened, and TableWorks is unable to locate a picture file, a special icon appears with a ‘?’ in the picture cell, you will have then to show TableWorks where is the picture file.
Suggestion to the user: To be compatible with most server OS, use alphabetic characters only and small file names.
Suggestion to the user: When you create a complete site, there is a document that will be the entry point in your site usually this document is named index.html.
Testing your work:
Since TableWorks is a WYSIWYG editor you don’t always have to go in your browser to see how things will eventually look, but of course to test your links you should use your browser. You don’t have to put your project folder on a server to see it in your browser, just choose the Open File item in the File menu of your browser.
More table editing features:
Whoever is familar with a spreadsheet will feel right at home with this software. You can think of each table that you create like a small spreadsheet with its own cells. Like a spreadsheet, tables are made of a choosen number of columns and rows. Changing the width of a column will cause the width of all the cells in that column to be transformed accordingly, the same shall proove true for rows. To perform such changes simply move the cursor over the separation between two columns or rows. The cursor’s appearance change allows the dragging of the separation to a column’s width or row’s height to user’s desire. You can resize many colums or rows at the same time like a spreadsheet by selecting cells in thoses. For example, let’s say we want to change the with of the first two columns to the exact same size, start by selecting cells in both columns and then use the mouse to drag the separation between the columns, the same technique applies for rows.
HTML tables are similar to small spreadsheets, but they you can do even more. In a spreadsheet the number of cells is the same for all columns and rows. With tables you can have a cell that spans over more than a column and/or more than a row. This spanning process is in fact difficult to code by hand, you would probably have to draw the table on a sheet of paper then figure out how to code the whole in HTML. This is the major advantage of this program, you can give a table the shape you want on screen and because this software is WYSIWYG everything you see will appear exactly the same in your browser.
Giving the table the shape you want:
The most powerful function of this software is probably the Merge Cells command found in the Table menu. With that command many cells become one. This is the function to use to give the table a specify shape. To learn more about the Merge Cells go in the Examples folder that came with TableWorks.
Suggestion to the user: If for example you have a 2 X 2 tables and you merge the two cells on the first row, they will become a single cell. That single cell then spans over two columns, it’s important that you understand that the width of that single cell depends now on the width of not one but two columns. Changing the width of the first and/or second column will have an effect on that cell. TableWorks tries to be intelligent with the width and height of cells that span over multiple columns and/or rows.
Table attributes that give a professionnal touch:
There are a certain number of attributes that can be modified to change the appearance of a specify table. They are: Table Border, Cell Spacing and the Cell Padding, you can find them in the Table menu.The Table Border attribute lets you specify the thickness of the table border. A border of 0 is frequently use on the Web because it creates an invisible table, you’re asking yourself why using a table if the table is invisible, it’s because a table gives you more flexibility, such as the insertion of a paragraph of text at the right of a picture. The Cell Spacing as its name implies will modify the space between all the cells in the table. In fact it is the space between a cell and its content and furthermore note that cell spacing affects all the cells in a given table. To see the effect of those attributes take a look in the Tutorial folder. The second item in the Table menu called Table Spacing is not really a table attribute in HTML sense, its an attribute that TableWorks uses to insert spaces before a table. Say you create a small catalog and decide on adding few tables, Table Spacing will allow you to insert space between the tables. TableWorks lets you insert space before a table by setting the table spacing attribute, to achieve this spacing in HTML, TableWorks insert returns, so you’ll have to specify your space in number of returns not in pixels. Another way to insert space before a table would be to add a table without content and a border set to 0, that table would act as a spacer.
Suggestion to the user: To enable the items in the Table menu you must select at least one cell in a particular table. This is true for embedded table too.
Adding, inserting and deleting columns and rows in a table:
When you add a new table you specify the number of columns and rows that will compose your table. There are six items in the Table menu that lets you change the number of columns and rows of an already created table. The Add Column function is used to add columns to the right of a table, the Add Row function to add rows at the bottom of a table. The number of columns or rows that will be added depends on the selection, for example if the selection spans over two columns then Add Column will add two columns, to add one columns select a cell that spans over one column. The Add Row works the same. The Insert Column and Insert Row items will insert a column or row just before the selected cells, you can also insert more than one column or row at a time by using a selection that spans over more than one column or row. To delete columns or rows use the Delete Column or Delete Row functions, the number of columns or rows deleted will depend on the selection. TableWorks will not let you delete all the columns or all the rows in a table, if you want to delete a table select it and then use the Clear item in the Edit menu.
Suggestion to the user: If you select a cell that spans over 3 columns (a cell that was created with the merge cells function) then choose the Add Column this will add not one but 3 columns. The same will prove true for all other 5 functions.
Moving tables around:
After adding a few tables you’ll probably want to change where a table is. Lets say you have created 3 tables and now want to move the last one just before the first one. First select the last table and cut it, the table disappear, now select the first table and use the Paste Before item in the Edit menu, you will see the table that was cut appear just before the selected table.
Creating embedded tables:
A table is considered embedded when its is inside another table cell. This create in fact a third type of cell, so now we have picture cell, text cell and embedded table cell. There two ways to create an embedded table cell, the first one is to select a cell an choose the Add Embedded Table item in the Edit menu, this will change the current cell type and insert a new table inside the cell. If you choose the Add Embedded Table again with the same cell selected you would add a new table after the one just created before. Another method to create an embedded table is to paste one or more tables from the clipboard in a cell, example: you select one or more tables the usual way, copy them in the clipboard then paste them in a the certain cell of your choice. You can apply this technique to create embedded tables in embedded tables. To delete embedded tables select the cell in wich the embedded tables are and then choose the Clear item in the Edit menu.
Suggestion to the user: Embedded tables let you do what is otherwise not possible, such for example: having a paragraph of text at the left and a table to the right. You can do pretty fancy stuff by combining this technique with invisible tables. The more imaginative you are the more creative you can be.To see some examples go to the Tutorial folder.
Settings colors for a page:
Using the Page Colors item in the Special menu you can set colors that will affect all of your page colors. They are: the background color, the text color (see note) the normal link color, the active link color (this is the color seen when you click and hold the mouse button over a link) and the visited link color (the color of link that you already have visited). Be aware since TableWorks is not a browser so you can’t see the active link color and the visited link color.
Note: When you change the text color, this will affect all of your text but the text you’ve changed using the Font Color item in the Format menu.
Selecting a background file:
This sounds great, unfortunately this version of TableWorks does not currently let you see a background, but you can select a background file using the Select Background item in the Special menu and TableWorks will generate the needed HTML code. The background you’ve selected however will be seen in your browser.
Using this software with your favorite HTML text editor:
Thanks to the Copy HTML command in the Edit menu, you can create one or more tables in seconds and then copy the HTML code into the clipboard in full color and paste it in your favorite HTML text editor. This technique is a lot faster than typing the code by hand and is a lot more visual too, it is why we are using Macs in the first place.
The viewing mode:
TableWorks is by default in Editing Mode, this is the mode to create HTML documents, if you select the Viewing Mode item in the Special menu you will go in viewing mode and will not be able to edit that’s all.
Important rules to get WYSIWYG results:
This software was designed to give WYSIWYG results with Netscape Navigator version 2.0 and up. But there are simple rules you must respect: Assure yourself that the text written in text cells does not exceed the size of the cell. In this latter situation enlarge the cell to include all the text, otherwise the text will exceed the cell when viewed in your navigator and further to change line or add a line as spacing within a text cell include a Return because your navigator will do fancy stuff of his own. Please dont use words larger than the text cell.
